<template>
    <div class="star-title">
        <img src="~assets/icons/star.png" alt="">
        <p>{{content}}</p>
        <img src="~assets/icons/star.png" alt="">
    </div>
</template>

<script>
export default {
    name:"starTitle",
    props:['content']
}
</script>

<style lang='less'>
@rem:100rem;

.star-title{
    width: 750/@rem;
    height: 98/@rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    img{
        width: 34/@rem;
        height: 30/@rem;
    }
    p{
        color: transparent;
        background-image: linear-gradient(180deg, 
        #35a9fe 0%, 
        #916ffe 85%, 
        #ed34fe 100%), 
        linear-gradient(
            #5b5b5b, 
            #5b5b5b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0 20/@rem;
    }
}
</style>
